<template>
  <div :id="`pieChart${index}`"></div>
</template>

<script>
  import { Chart, Util } from '@antv/g2';
  export default {
    name: 'PieChart',
    props: ['value','index','isSelected'],
    mounted() {
      this.initCharts()
    },
    methods: {
      initCharts() {
        const chart = new Chart({
          container: `pieChart${this.index}`,
          autoFit: true,
          height: 400,
          padding: [50, 50, 50, 50]
        });
        chart.data(this.value);

        chart.coordinate('theta', {
          radius: 0.75
        });
        chart.tooltip({
          showMarkers: false
        });
        if (this.isSelected) {
          const interval = chart
            .interval()
            .adjust('stack')
            .position('value')

            .color('type', ['#FF7171', '#EB9F9F', '#EBAC88', '#9FD8DF'])
            .style({ opacity: 0.4 })
            .state({
              active: {
                style: (element) => {
                  const shape = element.shape;
                  return {
                    matrix: Util.zoom(shape, 1.1)
                  }
                }
              }
            })
            .label('type', (val) => {
              const opacity = 0.5;
              return {
                offset: -30,
                style: {
                  opacity,
                  fill: 'white',
                  fontSize: 14,
                  shadowBlur: 2,
                  shadowColor: 'rgba(0, 0, 0, .25)'
                },
                content: (obj) => {
                  return obj.type + '\n' + obj.percent + '%';
                }
              };
            });
        } else {
          const interval = chart
            .interval()
            .adjust('stack')
            .position('value')

            .color('varchar', ['#FF7171', '#EB9F9F', '#EBAC88', '#9FD8DF'])
            .style({ opacity: 0.4 })
            .state({
              active: {
                style: (element) => {
                  const shape = element.shape;
                  return {
                    matrix: Util.zoom(shape, 1.1)
                  }
                }
              }
            })
            .label('type', (val) => {
              const opacity = 0.5;
              return {
                offset: -30,
                style: {
                  opacity,
                  fill: 'white',
                  fontSize: 14,
                  shadowBlur: 2,
                  shadowColor: 'rgba(0, 0, 0, .25)'
                },
                content: (obj) => {
                  return obj.varchar + '\n' + obj.percent + '%';
                }
              };
            });
        }


        chart.interaction('element-single-selected');

        chart.render();

      }
    }
  }
</script>

<style scoped>

</style>
